<!DOCTYPE html>
<html >

<head>
  <meta charset="utf-8" />
  <title>在线绘制流程</title>
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="css/diagram-js.css" />
  <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
  <link rel="stylesheet" href="css/app.css" />
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://npm.elemecdn.com/element-ui/lib/theme-chalk/index.css">

  <style>
    .tooltip {
      position: absolute;
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 5px;
      /* 更多的样式可以根据需要添加 */
    }

    .hidden {
      display: none;
    }
    .item{
      display: none;
      cursor: pointer;
    }
    .bjs-powered-by {
      display: none;
    }
    .buttons > li {
      /* display: inline-block; */
      margin-right: 10px;
      height: 26px;
      line-height: 26px;
      float: left;
    }
    .buttons > li > a.btn  {
      background: #00BCD4;
      border: none;
      outline: none;
      padding: 0px 10px;
      color: #fff;
      display: inline-block;
      opacity: 1;
      height: 26px;
      font-size: 14px;
      line-height: 26px;
    }
    .label  {
      background: #00BCD4;
      border: none;
      outline: none;
      padding: 0px 10px;
      color: #fff;
      display: inline-block;
      cursor: pointer;
      opacity: 1;
      height: 26px;
      font-size: 14px;
      line-height: 26px;
    }
    .sy-mask{width:100%;
      height:100%;
      position:fixed;
      background:rgba(0,0,0,0.8);
      left:0;top:0;z-index:1000;
      display: none;
    }
    .sy-alert{
      position:fixed;display:none;background:#fff;border-radius:5px;overflow:hidden;width:300px;max-width:90%;max-height:80%;left:0;right:0;margin:0 auto;z-index:9999}.sy-alert.animated{-webkit-animation-duration:.3s;animation-duration:.3s}.sy-alert .sy-title{height:45px;color:#333;line-height:45px;font-size:15px;border-bottom:1px solid #eee;padding:0 12px}.sy-alert .sy-content{padding:20px;text-align:center;font-size:14px;line-height:24px;color:#666;overflow-y:auto}.sy-alert .sy-btn{height:50%;border-top:1px solid #eee;overflow:hidden}.sy-alert .sy-btn button{float:left;border:0;color:#333;cursor:pointer;background:#fff;width:50%;line-height:45px;font-size:15px;text-align:center}.sy-alert .sy-btn button:nth-child(1){color:#888;border-right:1px solid #eee}.sy-alert.sy-alert-alert .sy-btn button{float:none;width:100%}.sy-alert.sy-alert-tips{text-align:center;width:150px;background:rgba(0,0,0,0.7)}.sy-alert.sy-alert-tips .sy-content{padding:8px;color:#fff;font-size:14px}.sy-alert.sy-alert-model .sy-content{text-align:left}.sy-alert.sy-alert-model .sy-content .form .input-item{margin-bottom:12px;position:relative}.sy-alert.sy-alert-model .sy-content .form .input-item input{display:block;position:relative;width:100%;border:1px solid #eee;padding:10px}.sy-alert.sy-alert-model .sy-content .form .input-item .getcode{border:0;top:0;right:0;position:absolute;background:0;line-height:37px;color:#f60;width:100px;text-align:center}

    .entry-button {
      width: 80px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      background: #00BCD4;
      color: #fff;
      cursor: pointer;
    }
    .bpmn-modal {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }
  </style>
</head>

<body>

<div class="content with-diagram" id="js-drop-zone">
  <div class="message error">
    <div class="note">
      <p>无法显示bpms2.0</p>
      <div class="details">
        <span>错误详细信息</span>
        <pre></pre>
      </div>
    </div>
  </div>
  <div class="canvas" id="js-canvas"></div>
  <div class="properties-panel-parent" id="js-properties-panel"></div>
</div>
<ul class="buttons">
  <li class="item upload">
    <form id="form1" name="myForm" onsubmit="return false" method="post" enctype="multipart/form-data" title="上传文件">
      <input type="file" name="uploadFile" id="uploadFile" accept=".bpmn" style="display: none">
      <label class="label" for="uploadFile" >导入</label>
    </form>
  </li>
  <li class="item download">
    <a class="btn" href id="downloadBpmn">导出</a>
  </li>
  <li class="item submit">
    <a class="btn" id="js-download-diagram">
      部署
    </a>
  </li>
</ul>
<div class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert" >
  <div class="sy-title">部署流程</div>
  <div class="sy-content">
        确认是否部署该流程
<!--    <div class="form">-->
<!--      <p class="input-item"><input id="deploymentName" type="text" placeholder="请输入流程名称"></p>-->
<!--    </div>-->
  </div>
  <div class="sy-btn">
    <button id="sure">确定</button>
    <button class="cancel" >取消</button>
  </div>
</div>
<div class="sy-mask cancel"></div>
<div class="bpmn-modal">
  <iframe id="Dynamic-form" style="width:100%;height:100%;" src="http://localhost:8080/" frameborder="0"></iframe>
</div>

<div id="editor-dialog-candidate">
  <el-dialog title="输入内容" :visible.sync="dialogVisible">
    <el-form :model="form">
      <el-form-item label="部门" :label-width="formLabelWidth">
        <el-tree
                :data="groupData"
                :props="treeDefaultProps"
                node-key="code"
                ref="groupListTree"
                @check="handleNodeCheck" show-checkbox></el-tree>
      </el-form-item>
      <el-form-item label="用户" :label-width="formLabelWidth" v-if="action === 'user'">
        <el-select v-model="form.user" multiple placeholder="请选择" math-width="100%">
          <el-option
                     v-for="item in userList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleClose">确 定</el-button>
  </span>
  </el-dialog>
</div>

<div id="tooltipBox"></div>


<script src="index.js"></script>
</body>

<script src="https://npm.elemecdn.com/vue@2/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://npm.elemecdn.com/element-ui/lib/index.js"></script>
<script>

  var vmCandidateDialog = new Vue({
    el: '#editor-dialog-candidate',
    data() {
      return {
        dialogVisible: false,
        groupSelect: false,
        docObj: null,
        $jq: null,
        $pp: null,
        action: 'user',
        form: {
          group: [],
          user: []
        },
        formLabelWidth: '50px',
        treeDefaultProps: {
          children: 'children',
          label: 'name'
        },
        groupData: [],
        userList: []
      };
    },
    mounted () {

    },
    methods: {
      init($jq, $pp, action, docObj) {

        this.dialogVisible = true
        this.$jq = $jq
        this.$pp = $pp
        this.action = action
        this.docObj = docObj

        this.groupData = []
        this.userList = []

        if (this.action === 'user') {
          this.form.group = []
          this.form.user = docObj.val() ? docObj.val().split(',') : []
        } else {
          this.form.group = docObj.val() ? docObj.val().split(',') : []
          this.form.user = []
        }

        let headers =  {
          "Authorization": 'Bearer ' + getUrlParam(window.location.href).tt
        }

        var query = "%7B%22w%22%3A%5B%5D%2C%22o%22%3A%5B%5D%2C%22p%22%3A%7B%22n%22%3A1%2C%22s%22%3A1000%7D%7D"

        this.$http.get('/manage/sys-dept/page?query=' + query, {'headers': headers}).then(function(res){
          res = res.body
          if (res.code != "200") {
            return this.$message.error(res.message)
          }
          this.groupData = res.data.result
          // this.groupData = handleTree(res.data, "deptId")
          this.$refs.groupListTree.setCheckedKeys(this.form.group, true)
        },function(){
          return this.$message.error("请求失败")
        });

        this.initSysUserList({})

      },
      handleClose(done) {
        var inputValue = ''
        if (this.action === 'user') {
          if (this.form.group) {
            inputValue = this.form.user.join(',')
          }
        } else {
          if (this.form.group) {
            inputValue = this.form.group.join(',')
          }
        }
        this.dialogVisible = false

        this.docObj.val(inputValue)
        this.docObj.get(0).dispatchEvent(new Event('input', { bubbles: true }))
      },
      handleNodeCheck(data) {
        this.form.group = this.$refs.groupListTree.getCheckedKeys()
        let query = {
          sysUserVO: {
            deptList : this.$refs.groupListTree.getCheckedKeys()
          }
        }
        this.initSysUserList(query)
      },
      initSysUserList(query) {
        let headers =  {
          "Authorization": 'Bearer ' + getUrlParam(window.location.href).tt
        }
        this.$http.post('/manage/sys-user/page2', JSON.stringify(query), {'headers': headers}).then(function(res){
          res = res.body
          if (res.code != "200") {
            return this.$message.error(res.message)
          }
          this.userList = res.data.result
        },function(){
          return this.$message.error("请求失败")
        });
      }
    }
  })

  function getUrlParam(url) {
    var object = {};
    if (url.indexOf("?") != -1) {
      var str = url.split("?")[1];
      var strs = str.split("&");
      for (var i = 0; i < strs.length; i++) {
        object[strs[i].split("=")[0]] = strs[i].split("=")[1]
      }
      return object
    }
    return object[url];
  }

  function handleTree(data, id, parentId, children) {
    let config = {
      id: id || 'id',
      parentId: parentId || 'parentId',
      childrenList: children || 'children'
    };

    var childrenListMap = {};
    var nodeIds = {};
    var tree = [];

    for (let d of data) {
      let parentId = d[config.parentId];
      if (childrenListMap[parentId] == null) {
        childrenListMap[parentId] = [];
      }
      nodeIds[d[config.id]] = d;
      childrenListMap[parentId].push(d);
    }

    for (let d of data) {
      let parentId = d[config.parentId];
      if (nodeIds[parentId] == null) {
        tree.push(d);
      }
    }

    for (let t of tree) {
      adaptToChildrenList(t);
    }

    function adaptToChildrenList(o) {
      if (childrenListMap[o[config.id]] !== null) {
        o[config.childrenList] = childrenListMap[o[config.id]];
      }
      if (o[config.childrenList]) {
        for (let c of o[config.childrenList]) {
          adaptToChildrenList(c);
        }
      }
    }
    return tree;
  }
</script>

</html>